<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<style>
		html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{-webkit-text-size-adjust:none}

		.letter_ul{ width: 40px; height: 100%; background: #fff; position: fixed; right: 0; top: 0; }
		.letter_ul li{ width: 40px; height: 20px;  text-align: center; line-height: 20px; list-style: none;}
		div{ text-align: center; line-height: 40px; width: 100%; height: 400px; background: #000; color: #fff; }
	</style>
</head>
<body>
<ul class="letter_ul">
	<li data="A">A</li>
	<li data="B">B</li>
	<li data="C">C</li>
	<li data="D">D</li>
	<li data="E">E</li>
	<li data="F">F</li>
	<li data="G">G</li>
	<li data="H">H</li>
	<li data="I">I</li>
	<li data="J">J</li>
	<li data="K">K</li>
	<li data="L">L</li>
	<li data="M">M</li>
	<li data="N">N</li>
	<li data="O">O</li>
	<li data="P">P</li>
	<li data="Q">Q</li>
	<li data="R">R</li>
	<li data="S">S</li>
	<li data="T">T</li>
	<li data="U">U</li>
	<li data="V">V</li>
	<li data="W">W</li>
	<li data="X">X</li>
	<li data="Y">Y</li>
	<li data="Z">Z</li>
</ul>
	<div class="letter_a" id="A">
		AAAAA
	</div>
	<div class="letter_b" id="B">
		BBBBB
	</div>
	<div class="letter_c" id="C">
		CCCCC
	</div>
	<div class="letter_d" id="D">
		DDDDD
	</div>
	<div class="letter_e" id="E">
		EEEEE
	</div>
	<div class="letter_f" id="F">
		FFFFF
	</div>
	<div class="letter_g" id="G">
		GGGGG
	</div>
	<div class="letter_h" id="H">
		HHHHH
	</div>
	<div class="letter_i" id="I">
		IIIII
	</div>
	<div class="letter_j" id="J">
		JJJJJ
	</div>
	<div class="letter_k" id="K">
		KKKKK
	</div>
	<div class="letter_l" id="L">
		LLLLL
	</div>
	<div class="letter_m" id="M">
		MMMMM
	</div>
	<div class="letter_n" id="N">
		NNNNN
	</div>
	<div class="letter_o" id="O">
		OOOOO
	</div>
	<div class="letter_p" id="P">
		PPPPP
	</div>
	<div class="letter_q" id="Q">
		QQQQQ
	</div>
	<div class="letter_r" id="R">
		RRRRR
	</div>
	<div class="letter_s" id="S">
		SSSSS
	</div>
	<div class="letter_t" id="T">
		TTTTT
	</div>
	<div class="letter_u" id="U">
		UUUUU
	</div>
	<div class="letter_v" id="V">
		VVVVV
	</div>
	<div class="letter_w" id="W">
		WWWWW
	</div>
	<div class="letter_x" id="X">
		XXXXX
	</div>
	<div class="letter_y" id="Y">
		YYYYY
	</div>
	<div class="letter_z" id="Z">
		ZZZZZZ
	</div>
  
</body>
<script>
  window.onload=touchFun;
  function touchFun(argument) {
  	document.addEventListener("touchmove", _touch, false);
  }
  function _touch(event){
  	var touch = event.touches[0];
  	//alert("x:"+Number(touch.clientX)+",y:"+Number(touch.clientY));
  	var element = document.elementFromPoint(Number(touch.clientX), Number(touch.clientY));
  	//alert(JSON.stringify(element));
  	//var element=touch.target;
  	var datastr=element.getAttribute("data");
  	
	if(datastr!=null && datastr!="null" && datastr.match(/^([A-Z])+$/)){
		
		window.location.href="#"+datastr;
	}
}
</script>
</html>